<template>
	<scroll-view class="grid-scroll-container" scroll-y="true" :show-scrollbar="false">
		<view class="grid-container">
			<view
				v-for="(item, index) in list"
				:key="index"
				class="grid-item"
				@click="cGo(item)"
			>
				<image :src="item.icon" mode="aspectFill" class="grid-icon"></image>
				<text class="grid-text">{{ item.name || item.text || item.title }}</text>
			</view>

		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'GridMenu',
	props: {
		list: {
			type: Array,
			default: () => [
			]
		}
	},
	methods: {
		cGo(item) {
					const link = item.link || item.url;
					if (!link) return;

					try {
						// 标准化路径格式（去除前导/和查询参数）
						const normalizedLink = link.replace(/^\//, '').split('?')[0];

						// tabBar页面列表 - 从实际的pages.json同步更新
						const tabBarPages = [
							'pages/index/index',
							'pages/profile/profile'
						];

						// 判断是否为tabBar页面
						const isTabBarPage = tabBarPages.includes(normalizedLink);

						if (isTabBarPage) {
							uni.switchTab({
								url: `/${normalizedLink}`,
								fail: (err) => {
									console.error('switchTab failed:', err);
									// 如果switchTab失败，回退到普通导航
									uni.navigateTo({ url: link });
								}
							});
						} else {
							uni.navigateTo({
								url: link,
								fail: (err) => {
									console.error('navigateTo failed:', err);
								}
							});
						}
					} catch (error) {
						console.error('Navigation error:', error);
						// 发生错误时尝试普通导航
						uni.navigateTo({ url: link });
					}
				}
	}
};
</script>

<style lang="scss" scoped>
.grid-scroll-container {
	/* 设置固定高度，确保即使5行内容也能滚动 */
	/* 每行高度约280rpx，设置为3.5行的高度，这样5行内容就需要滚动 */
	height: 980rpx;
	max-height: 50vh; /* 在小屏幕上限制最大高度 */
	background-color: #f5f5f5;
	/* 优化滚动体验 */
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.grid-container {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100%;
	align-content: flex-start; /* 向上对齐 */

	.grid-item {
		width: calc(50% - 20rpx);
		height: 260rpx;
		margin: 10rpx;
		padding:10rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		&:nth-child(8n+1) {
			background-color: #FFE4E4;
			.grid-text {
				color: #FF4D4D;
			}
		}

		&:nth-child(8n+2) {
			background-color: #E4FFE4;
			.grid-text {
				color: #4CAF50;
			}
		}

		&:nth-child(8n+3) {
			background-color: #E4F1FF;
			.grid-text {
				color: #2196F3;
			}
		}

		&:nth-child(8n+4) {
			background-color: #FFF3E0;
			.grid-text {
				color: #FF9800;
			}
		}

		&:nth-child(8n+5) {
			background-color: #F3E5F5;
			.grid-text {
				color: #9C27B0;
			}
		}

		&:nth-child(8n+6) {
			background-color: #E8F5E9;
			.grid-text {
				color: #43A047;
			}
		}

		&:nth-child(8n+7) {
			background-color: #E3F2FD;
			.grid-text {
				color: #1E88E5;
			}
		}

		&:nth-child(8n+8) {
			background-color: #FFF8E1;
			.grid-text {
				color: #FFA000;
			}
		}

		.grid-icon {
			// width: 120rpx;
			height: 160rpx;
			margin-bottom: 16rpx;
		}

		.grid-text {
			font-size: 28rpx;
			font-weight: 500;
			padding: 0 20rpx;
			text-align: center;
		}
	}
}
</style>
